<template>
    <view class="mental-input-container">
        <!-- 标题栏 -->
        <view class="header">
            <view class="back-button" @click="goBack">
                <u-icon name="arrow-left" color="#333" size="20"></u-icon>
                <text>返回</text>
            </view>
            <text class="page-title">心理情况记录</text>
            <view class="placeholder"></view>
        </view>

        <!-- 表单内容 -->
        <view class="form-container">
            <!-- 心情评分 -->
            <view class="input-group">
                <text class="input-label">今日心情</text>
                <view class="mood-selector">
                    <view v-for="(mood, index) in moods" :key="index" class="mood-item"
                        :class="{ active: mentalData.mood === mood.value }" @click="mentalData.mood = mood.value">
                        <text class="mood-emoji">{{ mood.emoji }}</text>
                        <text class="mood-name">{{ mood.name }}</text>
                    </view>
                </view>
            </view>

            <!-- 情绪来源 -->
            <view class="input-group">
                <text class="input-label">情绪来源</text>
                <u-checkbox-group v-model="mentalData.moodSources">
                    <view class="checkbox-grid">
                        <u-checkbox label="工作/学习" name="work"></u-checkbox>
                        <u-checkbox label="人际关系" name="relationship"></u-checkbox>
                        <u-checkbox label="家庭" name="family"></u-checkbox>
                        <u-checkbox label="健康" name="health"></u-checkbox>
                        <u-checkbox label="财务" name="finance"></u-checkbox>
                        <u-checkbox label="社会事件" name="society"></u-checkbox>
                        <u-checkbox label="自我期望" name="selfExpectation"></u-checkbox>
                        <u-checkbox label="其他" name="other"></u-checkbox>
                    </view>
                </u-checkbox-group>
            </view>

            <!-- 压力等级 -->
            <view class="input-group">
                <text class="input-label">压力等级</text>
                <view class="stress-level">
                    <u-slider v-model="mentalData.stressLevel" min="0" max="10" step="1"
                        activeColor="#ce82ff"></u-slider>
                    <view class="stress-scale">
                        <text>无压力</text>
                        <text>中等压力</text>
                        <text>极大压力</text>
                    </view>
                </view>
                <view class="input-tips">
                    <text>评分从0到10，0表示无压力，10表示压力极大</text>
                </view>
            </view>

            <!-- 睡眠质量 -->
            <view class="input-group">
                <text class="input-label">睡眠质量</text>
                <u-rate v-model="mentalData.sleepQuality" count="5" active-color="#ce82ff"></u-rate>
                <view class="sleep-desc">{{ sleepQualityDesc }}</view>
                <view class="input-tips">
                    <text>评分从1到5，1表示很差，5表示很好</text>
                </view>
            </view>

            <!-- 放松活动 -->
            <view class="input-group">
                <text class="input-label">今日放松活动</text>
                <u-checkbox-group v-model="mentalData.relaxActivities">
                    <view class="checkbox-grid">
                        <u-checkbox label="冥想/瑜伽" name="meditation"></u-checkbox>
                        <u-checkbox label="深呼吸" name="breathing"></u-checkbox>
                        <u-checkbox label="阅读" name="reading"></u-checkbox>
                        <u-checkbox label="音乐" name="music"></u-checkbox>
                        <u-checkbox label="户外活动" name="outdoor"></u-checkbox>
                        <u-checkbox label="洗澡/泡澡" name="bath"></u-checkbox>
                        <u-checkbox label="交谈/社交" name="social"></u-checkbox>
                        <u-checkbox label="其他" name="other"></u-checkbox>
                    </view>
                </u-checkbox-group>
            </view>

            <!-- 心理状态简述 -->
            <view class="input-group">
                <text class="input-label">心理状态简述</text>
                <u-textarea v-model="mentalData.mentalNotes" placeholder="描述一下你的心理状态..." count
                    maxlength="300"></u-textarea>
            </view>

            <!-- 需要帮助 -->
            <view class="input-group">
                <text class="input-label">是否需要专业帮助</text>
                <u-switch v-model="mentalData.needHelp" activeColor="#ce82ff"></u-switch>
                <view class="input-tips" v-if="mentalData.needHelp">
                    <text>如果你正在经历严重的心理问题，建议寻求专业心理咨询师的帮助</text>
                </view>
            </view>

            <!-- 记录日期 -->
            <view class="input-group">
                <text class="input-label">记录日期</text>
                <u-datetime-picker v-model="mentalData.recordDate" mode="date"></u-datetime-picker>
            </view>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-section">
            <u-button type="primary" text="保存记录" :customStyle="{ backgroundColor: '#ce82ff' }"
                @click="saveRecord"></u-button>
        </view>

        <!-- 专业帮助提示框 -->
        <u-modal v-model="showHelpModal" title="心理健康提示" :content="helpContent" showCancelButton confirmText="我知道了"
            cancelText="关闭"></u-modal>
    </view>
</template>

<script>
export default {
    data() {
        return {
            mentalData: {
                mood: 'neutral', // 心情
                moodSources: [], // 情绪来源
                stressLevel: 5, // 压力等级
                sleepQuality: 3, // 睡眠质量
                relaxActivities: [], // 放松活动
                mentalNotes: '', // 心理状态描述
                needHelp: false, // 是否需要专业帮助
                recordDate: new Date().toISOString() // 记录日期
            },
            moods: [
                { value: 'excellent', name: '很开心', emoji: '😄' },
                { value: 'good', name: '开心', emoji: '🙂' },
                { value: 'neutral', name: '一般', emoji: '😐' },
                { value: 'bad', name: '不好', emoji: '😔' },
                { value: 'terrible', name: '糟糕', emoji: '😞' }
            ],
            showHelpModal: false,
            helpContent: '心理健康与身体健康同样重要。如果你持续感到情绪低落、焦虑或有其他负面情绪，建议：\n\n1. 与信任的亲友交流\n2. 尝试改变环境，进行户外活动\n3. 保持充足的睡眠和均衡的饮食\n4. 寻求专业心理咨询师的帮助\n\n全国心理援助热线：400-161-9995'
        }
    },
    computed: {
        // 睡眠质量描述
        sleepQualityDesc() {
            const descriptions = ['很差', '较差', '一般', '良好', '优秀'];
            return descriptions[this.mentalData.sleepQuality - 1] || '';
        }
    },
    methods: {
        // 返回上一页
        goBack() {
            uni.navigateBack()
        },
        // 保存记录
        saveRecord() {
            // 处理数据保存
            console.log('保存心理情况数据:', this.mentalData)

            // 如果用户选择需要专业帮助，显示帮助提示框
            if (this.mentalData.needHelp || this.mentalData.stressLevel >= 8 || this.mentalData.mood === 'terrible') {
                this.showHelpModal = true;
                return; // 等用户确认后再继续
            }

            // TODO: 调用API保存数据
            this.completeSubmission();
        },
        // 完成提交
        completeSubmission() {
            // 显示成功提示
            uni.showToast({
                title: '记录保存成功',
                icon: 'success',
                success: () => {
                    // 延迟返回
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)
                }
            })
        }
    },
    // 监听弹窗关闭事件
    watch: {
        showHelpModal(val) {
            if (!val && this.mentalData.needHelp) {
                // 弹窗关闭后完成提交
                this.completeSubmission();
            }
        }
    }
}
</script>

<style lang="scss">
$duolingo-purple: #ce82ff;

.mental-input-container {
    min-height: 100vh;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
}

.header {
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-button {
    display: flex;
    align-items: center;
    font-size: 28rpx;

    text {
        margin-left: 6rpx;
    }
}

.page-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.placeholder {
    width: 80rpx;
}

.form-container {
    flex: 1;
    padding: 30rpx;
}

.input-group {
    margin-bottom: 40rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.input-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    display: block;
    font-weight: bold;
}

.input-tips {
    margin-top: 10rpx;

    text {
        font-size: 24rpx;
        color: #999;
    }
}

.mood-selector {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.mood-item {
    width: 120rpx;
    height: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12rpx;
    margin: 10rpx 0;
    transition: all 0.2s;
    border: 2rpx solid #eee;

    &.active {
        background-color: rgba($duolingo-purple, 0.1);
        border-color: $duolingo-purple;
    }

    .mood-emoji {
        font-size: 40rpx;
        margin-bottom: 6rpx;
    }

    .mood-name {
        font-size: 24rpx;
        color: #666;
    }
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10rpx;
    margin: 10rpx 0;
}

.stress-level {
    padding: 0 10rpx;
    margin-bottom: 10rpx;
}

.stress-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6rpx;

    text {
        font-size: 24rpx;
        color: #666;
    }
}

.sleep-desc {
    margin-top: 10rpx;
    font-size: 26rpx;
    color: $duolingo-purple;
}

.submit-section {
    padding: 30rpx;
    margin-bottom: 30rpx;
}
</style>